<template>
	<view>
		<view class="lb-main-32" style="padding-top: 0;">
			<view class="lb-item">
				<view class="item-left">
					抖音券码
				</view>
				<view class="item-right">
					<input type="text" placeholder="请输入抖音券码" placeholder-style="font-size: 28rpx; color: #999999;">
				</view>
			</view>
			<view class="lb-item">
				<view class="item-left">
					联系电话
				</view>
				<view class="item-right">
					<input type="text" placeholder="请输入联系电话" placeholder-style="font-size: 28rpx; color: #999999;">
				</view>
			</view>
			<view class="lb-item">
				<view class="item-left">
					区域
				</view>
				<view class="item-right">
					<input type="text" placeholder="请选择区域" placeholder-style="font-size: 28rpx; color: #999999;"
						disabled="">
					<view class="right-icon">
						<u-icon name="arrow-down" color="#999999"></u-icon>
					</view>
				</view>
			</view>
			<view class="lb-item">
				<view class="item-left">
					详细地址
				</view>
				<view class="item-right">
					<input type="text" placeholder="请输入详细地址" placeholder-style="font-size: 28rpx; color: #999999;">
				</view>
			</view>
			<view class="lb-item">
				<view class="item-left">
					取件方式
				</view>
				<view class="item-right">
					<view class="right-item" v-for="(item,index) in typeData" :key="index">
						<image :src="typeIndex == index ? '/static/icon/yes.png':'/static/icon/no.png'" mode=""></image>
						<text>{{item.name}}</text>
					</view>

				</view>
			</view>
			<view class="lb-item">
				<view class="item-left">
					预约时间
				</view>
				<view class="item-right">
					<input type="text" placeholder="请选择预约时间" placeholder-style="font-size: 28rpx; color: #999999;"
						disabled="">
					<view class="right-icon">
						<u-icon name="arrow-down" color="#999999"></u-icon>
					</view>
				</view>
			</view>
			<view class="lb-item-2">
				<view class="item-left">
					洗护物品照片
				</view>
				<view class="item-img">
					<view class="img-list">
						<!-- <view class="imgs" v-for="(item,index) in 3" :key="index">
							<view class="close" @click="delImages(index,imgArr)">
								<image src="/static/icon/close.png" mode=""></image>
							</view>
							<image src="/static/logo.png" @click="lookImages(index,imgArr)" mode="">
							</image>
						</view> -->
					</view>
					<view class="img-up">
						<image src="/static/icon/up-btn.png" mode=""></image>
					</view>
					<view class="lb-tip">
						温馨提示：为了保障您的权益，请您上传每一件洗涤衣物照片
					</view>
				</view>
			</view>
			<view class="lb-item-2">
				<view class="item-left">
					备注留言
				</view>
				<view class="item-textarea">
					<textarea cols="30" rows="10" maxlength="30" placeholder="请输入您的留言或备注，不超过30个字"
						placeholder-style="font-size: 24rpx; font-weight: 400; color: #CCCCCC;"></textarea>
				</view>
			</view>

			<view class="lb-btn">
				核销券码并预约
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeIndex: 0,
				typeData: [{
						name: '上门取衣'
					},
					{
						name: '自送门店/代收点'
					},
				]
			}
		},
		methods: {
			//查看数组图片
			lookImages(index, data) {
				if (data) {
					uni.previewImage({
						current: index,
						urls: data
					});
				}
			},
			//删除图片
			delImages(index, field = '') {
				let _this = this;
				// console.log(index)
				_this.imagesArr.splice(index, 1);
			},
			//上传图片
			uploadImage(count = 1, field = '') {
				let _this = this;
				uni.chooseImage({
					count: count, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(album) {
						// console.log(album.tempFilePaths)
						album.tempFilePaths.forEach((item, index) => {
							// console.log(item)
							uni.getImageInfo({
								src: item, //album.tempFilePaths[0],
								success: function(image) {
									// console.log(image)
									uploadFilesApi(image.path).then(
										res => {
											if (res.code == 200) {
												let url = res.data.url;

											}

										});
								}
							});
						})

					}
				});
			},

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.lb-tip {
		font-size: $main-font-20;
		color: #F65D40;
		padding: 12rpx 0;
		width: 100%;
	}

	.lb-item {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 42rpx 0 24rpx 0;
		border-top: 2rpx solid #F5F5F5;

		&:nth-of-type(1) {
			border: none
		}

		.item-left {

			width: 150rpx;
			font-size: $main-font-28;
			color: $main-font-color;

			&::before {
				content: '* ';
				color: #F65D40;
			}
		}

		.item-right {
			width: calc(100% - 150rpx);

			display: flex;
			flex-direction: row;
			justify-content: flex-end;

			input {
				width: 100%;
				text-align: right;
				font-size: $main-font-28;
				color: $main-font-color;
			}

			.right-item {
				display: flex;
				flex-direction: row;
				padding-left: 38rpx;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 16rpx;
				}

				text {
					font-size: $main-font-28;
					color: $main-font-color;
				}
			}

			.right-icon {
				display: flex;
				flex-direction: row;
				padding: 12rpx;
			}
		}

	}

	.lb-item-2 {
		width: 100%;
		display: flex;
		flex-direction: column;
		padding: 24rpx 0;
		border-top: 2rpx solid #F5F5F5;



		.item-left {

			font-size: $main-font-28;
			color: $main-font-color;
			padding-bottom: 12rpx;


		}

		.item-textarea {
			height: 120rpx;
			background: rgba(245, 245, 245, 0.39);
			border: 2rpx solid #CCCCCC;
			border-radius: 16rpx;

			textarea {
				width: 100%;
				height: 120rpx;
				padding: 16rpx;
				font-size: $main-font-24;
				font-weight: 400;
				color: $main-font-color;
			}

		}

		.item-img {
			display: flex;
			// flex-direction: column;
			flex-direction: row;
			flex-wrap: wrap;

			.img-list {
				// width: 100%;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;

				.imgs {
					width: 150rpx;
					height: 150rpx;
					margin: 0 10rpx 10rpx 0;
					box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.16);
					border-radius: 16rpx;

					position: relative;

					.close {
						position: absolute;
						width: 24rpx;
						height: 24rpx;
						top: -12rpx;
						right: -12rpx;
					}

					image {
						border-radius: 16rpx;
					}
				}
			}

			.img-up {
				width: 150rpx;
				height: 150rpx;
				
				image {
					border-radius: 16rpx;
				}
			}


		}

	}

	.lb-btn {
		width: 600rpx;
		height: 88rpx;
		background: linear-gradient(135deg, #F7583F 0%, #F28F4C 100%);
		border-radius: 44rpx;
		line-height: 86rpx;
		text-align: center;
		font-size: $main-font-28;
		color: $main-font-color-white;
		margin: 36rpx auto 0;
	}
</style>